<template>
  <view>
    <view class="case-item">

      <view class="image_container">
        <image class="image_good" :src="`${baseURL}${productDetail.dataPic}`">
        </image>
        <view class="tag">HUIDA 惠达</view>
      </view>

    </view>
    <view class="card">
      <view class="row_container">

        <view class="product_title">{{productDetail.goodsName}}</view>

        <image class="icon"
          :src="isCollect?'../../static/images/icon_collected.png':'../../static/images/icon_collect.png'"
          @click="collect"></image>
        <button class="button_white" open-type="share" @click="share">
          <image class="icon" src="../../static/images/icon_share.png"></image>
        </button>
      </view>
    </view>


  </view>
  <view class="card">
    <view class="title">规格</view>
    <view class="row_container_bottom_line" v-for="(item,index) in productDetail.rsGoodsRelDomainList" :key="index">

      <view class="content">{{item.skuName||item.goodsName}}</view>
      <!-- <view class="content">{{item.skuEocode}}</view> -->
      <view class="content">{{item.pricesetNprice}}</view>
    </view>
  </view>
  <view class="card">
    <view class="title">商品介绍</view>
    <view class="instruction">{{productDetail.goodsRemark||'暂无'}}</view>
  </view>
  <view class="title_long">商品详情</view>
  <view class="card_long">

    <image mode="widthFix" class="image_long" v-for="(item,index) in productDetail.rsGoodsFileDomainList" :key="index"
      :src="`${baseURL}${item.goodsFileUrl}`" />
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
  import { baseURL } from '@/utils/http';
  import { collectFile } from '@/services/file';
  import { deleteFileCollectByCode } from '@/services/collect';
  import { useMemberStore } from '@/stores';
  import { findProducList } from '@/services/home';

  const userInfo : any = useMemberStore().getUserInfo()
  const query = defineProps<{ data : string, goodsCode : string }>()
  const productDetail : any = ref({})
  const isCollect = ref(false)
  const dictTypeCode = 7

  onLoad(() => {
    // 启用分享菜单（支持分享给好友和朋友圈）
    uni.showShareMenu({
      withShareTicket: true, // 是否使用带 shareTicket 的分享
      menus: ['shareAppMessage', 'shareTimeline'], // 可选：'shareAppMessage'（好友）、'shareTimeline'（朋友圈）
    })
    if (query.data) {//商品列表跳转
      productDetail.value = JSON.parse(query.data)
      console.log(productDetail.value.rsSkuDomainList)
      console.log(productDetail.value.rsGoodsRelDomainList)
    } else if (query.goodsCode) {//我的收藏跳转
      getData(query.goodsCode)
    }

  })
  /**
   * 获取数据集
   */
  const getData = (goodsCode : any) => {

    uni.showLoading({
      title: ''
    })

    //查询
    findProducList({
      page: 1,
      rows: 10,
      channelCode: 'delearchannelcode',
      searchType: 'match_phrase',
      goodsOrigin: '0,8',
      goodsType: '00,40,03',
      vendibilityFlag: true,
      childFlag: true,
      hjFlag: true,
      bizType: 'sku',
      sortField: '',
      goodsClassParentcode: -1,
      searchParam: '',
      channelCodeStr: '',
      goodsCode
    }).then((res : any) => {
      uni.hideLoading()
      console.log(res.list)
      productDetail.value = res.list[0]
    }).catch(e => {
      uni.hideLoading()
    })
  }

  //分享
  onShareAppMessage(() => {

    return {
      title: '我正在使用云助手小程序', // 分享标题
      path: `/pages/product/productDetail?data=${query.data}`,
      imageUrl: '/static/logo.jpg', // 分享图片（可选）
    }
  })
  //分享
  const share = () => {
    console.log('用户点击了分享按钮，但实际分享逻辑由 onShareAppMessage 控制')
  }
  let fileCollectCode = ''
  //收藏
  const collect = () => {
    console.log(productDetail.value.rsGoodsFileDomainList)

    if (isCollect.value) {
      //取消收藏
      deleteFileCollectByCode({ "fileCollectCode": fileCollectCode }).then(res => {

        if (res.success) {
          uni.showToast({
            title: '取消收藏成功',
            icon: 'none'
          })
          isCollect.value = false
        }
      })
      return
    }
    collectFile({
      userCode: userInfo.userCode,
      dictTypeCode,
      'fileCode': productDetail.value.goodsCode
    }).then((res : any) => {
      console.log(res)
      if (res.success) {
        fileCollectCode = res.dataObj
        isCollect.value = true
        uni.showToast({
          title: '收藏成功',
          icon: 'none'
        })
      }
    }).catch(e => {
      console.log(e)
    })
  }
</script>

<style lang="scss">
  page {
    padding-bottom: 32rpx;
  }

  .case-item {
    margin: 20rpx 15rpx;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 15rpx;
    align-items: center;
    box-sizing: border-box;
    border-radius: 8rpx;
    background-color: #F9FAFB;


    .image_longimage_long {
      width: 100%;
    }

    .image_container {
      position: relative;
      width: 100%;
      height: fit-content;
      box-sizing: border-box;
      border-radius: 16rpx;
      border: 8rpx solid #00C1D1;
      overflow: hidden;
      /* 设置溢出隐藏 */

      .image_good {
        width: 100%;
        height: 702rpx;
      }

      .tag {
        text-align: center;
        line-height: 50rpx;
        height: 50rpx;
        width: 180rpx;
        left: -2rpx;
        top: -2rpx;
        color: white;
        font-size: 26rpx;
        position: absolute;
        border-top-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
        background-color: #00C1D1;
      }

    }


  }

  .card {
    padding: 32rpx 20rpx;
    margin-left: 15rpx;
    margin-right: 15rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .title_long {
    margin-top: 32rpx;
    margin-left: 16rpx;
    margin-bottom: 32rpx;
    height: 48rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #1C253A;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .card_long {
    height: auto;
    margin: 30rpx 15rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .title {
    margin-bottom: 32rpx;
    height: 48rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #1C253A;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .row_container {
    margin-top: 16rpx;
    display: flex;
    flex-direction: row;
  }

  .row_container_bottom_line {
    margin-top: 32rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 2rpx solid #f5f6f5;
  }

  .product_title {
    flex-grow: 1;
    text-align: left;
    font-size: 32upx;
    font-weight: bold;
    color: #3d3d3d;
  }

  .content {
    text-align: left;
    font-size: 26upx;
    margin-bottom: 10rpx;
    color: #1C253A;
  }

  .instruction {
    margin: 16rpx 20rpx;
    text-align: left;
    font-size: 26upx;
    margin-bottom: 10rpx;
    color: #1C253A;
  }

  .icon {
    width: 56rpx;
    height: 56rpx
  }

  .button_white {
    background-color: white;
    padding: 0rpx;
    margin-left: 6rpx;
    height: 56rpx;
    line-height: 56rpx;
  }
</style>
